<template>
	<view>
		<view class="accredit_model">
			<view class="model_container">
				<view class="model_top" :style="{backgroundColor:list.bgColor}">
					<view class="model_icon"></view>
				</view>
				<view class="model_content">
					<view class="model_title">{{list.title}}</view>
					<view class="model_desc">{{list.content}}</view>
					<view class="model_btns">
						<view class="mbtn cancel_btn" @click="cancelBtn">拒绝</view>
						<view class="mbtn confirm_btn" :style="{backgroundColor:list.bgColor}" @click="confirmBtn">同意
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask"></view>
	</view>
</template>
<script setup>
	import {
		reactive,
		getCurrentInstance
	} from "vue"

	const {
		proxy
	} = getCurrentInstance()
	const mp = uni.requireNativePlugin('uniMP')
	const list = reactive({
		title: '授权提示',
		content: '获取某某应用的用户信息和登录状态',
		bgColor: '#ff4390',
	})
	const cancelBtn = () => {
		plus.runtime.quit()
	}
	const confirmBtn = () => {
		proxy.$helper.getMPAuthToken()
	}
</script>

<style scoped lang="scss">
	.accredit_model {
		width: 560rpx;
		height: 660rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.model_container {
		width: 100%;
		height: 660rpx;
	}

	.model_top {
		width: 100%;
		height: 270rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-image: url();
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.model_icon {
		width: 230rpx;
		height: 210rpx;
		background-size: cover;
		background-image: url();
	}

	.model_content {
		width: 100%;
		height: 390rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.model_title {
		text-align: center;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
	}

	.model_desc {
		width: 448rpx;
		height: 96rpx;
		margin: 20rpx auto 0;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 48rpx;
	}

	.model_btns {
		width: 448rpx;
		height: 82rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	.mbtn {
		width: 208rpx;
		height: 82rpx;
		border-radius: 42rpx;
		margin-top: 44rpx;
	}

	.cancel_btn {
		background: #F5F5F5;
		font-weight: 400;
		color: #666666;
		line-height: 82rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.confirm_btn {
		background: #D64532;
		font-weight: 400;
		color: #fff;
		line-height: 82rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.mask {
		z-index: 900;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
	}
</style>